<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item
      :to="item.path"
      v-for="(item, index) in list"
      :key="index"
      >{{ item.title }}</el-breadcrumb-item
    >
  </el-breadcrumb>
</template>
<script setup>
import { computed } from "vue";
import { useRoute } from "vue-router";
const route = useRoute();

const list = computed({
  get: () => {
    const breadcrumbs = route.matched.map((x) => {
      return {
        path: x.path,
        title: x.meta.title,
      };
    });
    return breadcrumbs;
  },
});
</script>
<style lang="less" scoped>
:deep(.el-breadcrumb__item span) {
  color: #818181;
  font-size: 14px;
  font-weight: 400;
}

:deep(.el-breadcrumb__item:last-child) {
  .el-breadcrumb__inner {
    color: #3a85f5 !important;
  }
}
</style>